// 
// 群聊界面
// 

$chatroom-header: 56px;

// 右侧边列表
.channel-panel {
  display: flex;
  flex-direction: column;
  width: calc(20vw);
  min-width: 240px;
  background-color: white;
  border-right: 1px solid $border-color;

  .channel-panel-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    height: $chatroom-header;
    border-bottom: 1px solid $border-color;
  }

  .channel-panel-content {
    position: relative;
    flex: 1;

    .list-group-item-action {
      @include hover-focus {
        z-index: 0;
      }
    }
  }
}

// 聊天窗口
.channel-chatroom {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: white;

  .channel-chatroom-header {
    display: flex;
    align-items: center;
    padding: 1rem;
    height: $chatroom-header;
    border-bottom: 1px solid $border-color;
  }

  .channel-chatroom-content {
    position: relative;
    flex: 1;
  }
  
  .channel-chatroom-footer {
    height: 64px;
    display: flex;
    align-items: center;
    border-top: 1px solid $border-color;
  }
}

.channel-tools {
  display: flex;
  
  .channel-tools-panel {
    display: flex;
    flex-direction: column;
    width: calc(25vw);
    min-width: 300px;
    background-color: white;
    border-left: 1px solid $border-color;

    .channel-tools-panel-header {
      text-align: center;
      padding: 1rem;
      height: $chatroom-header;
      border-bottom: 1px solid $border-color;
      // @include gradient-bg($gray-100);
    }
  }

  .channel-tools-btns {
    display: flex;
    flex-direction: column;
    width: 56px;
    padding: 0;
    background-color: white;
    border-left: 1px solid $border-color;

    button {
      display: flex;
      justify-content: center;
      padding: 1rem 0;
      color: rgba($black, .7);
      background: transparent;
      border: 0;
      outline: 0;
      cursor: pointer;

      &.active {
        color: $primary;
      }
    }
  }
}
